form validation
error messageを表示するとがたつくのってどうなん？
良くない気がする
それも考慮してfieldを配置しないといけないのか
fieldが常にbottom marginを持っっている感じの見た目になる
それはそれでおかしい
Googleはerrorが入った時に下にずれている
つまりガタついている
が、そんなに違和感ない
https://gyazo.com/bcd1dd3481433008a51c0e0bc813cddd
htmlにはdefaultでそういう機能がある
が、ブラウザごとに挙動が異なるので『Form Design Patterns』.iconでは非推奨
エラーサマリを表示し、それらはリンクになっている
そのリンクをクリックすると該当のformにfocusが移る
↓の本では、送信時にリフレッシュする想定なので、エラーサマリはfield列の上に表示するほうがいい、と書いてるが、SPAとかだといちいちリロードさせないと思うので、そのときは、field列とsubmit buttonの間ぐらいに出すのがいいんじゃないかなmrsekut.icon 一番上に出してもviewportから出てたら気づかんだろうし
あとは、モーダルで表示するとか
エラーサマリはここで空で送信した時に上の方に表示されるやつ インラインエラーは、fieldの上に表示する
下に表示すると候補とかで隠れる
スマホのオンスクリーンキーボードでも隠れる
live validation
『Form Design Patterns』.icon p.52~
エラー出すのがおそすぎるかはやすぎるかになるので良くない
良くないのか？mrsekut.icon
慣れてなかったら良くないかmrsekut.icon
『Form Design Patterns』.icon p.53~
３つの理由で非推奨
そんな思うかな〜mrsekut.icon
わかった、これコンパイルエラーの感覚だmrsekut.icon
間違っている状態のときはエラー出してほしくて、エラーを消せばokという発想になってるmrsekut.icon
普通の人(?)はそうではないので、ダルいのか
アクセシビリティ観点はそうなんだろうけど
フィードバックを起こすほうがいい
例えばこういうのはどうだろうmrsekut.icon
正しい値じゃないときはフォームを仄かに赤くするなどする
エラーとは言ってない
あるいは正しい状態になったらformの色を緑に変えるとか
こうすれば「未完成ってわかってんねん」って状態の時にエラーメッセージは表示されない
このValidation良い
https://i.gyazo.com/14924668d7723a6bdb9c10c580006469.gif
間違った入力のときにerrorを出さない